<template>
  <div class="page-wrap">
    <!-- 页面面包屑 -->
    <bread :cur-path="{ toPath: '/product', name: '产品中心' }" />
    <div class="page-main">
      <div class="con-box">
        <div class="main-menu-box">
          <h2><i class="yicon"></i>产品中心</h2>
          <ul class="main-menu shadow-box">
            <li @click="$router.push('/product')"><a style="cursor:pointer">所有产品</a></li>
            <li v-for="cate in categoryList" :key="cate.id" :class="{active: cate.id === pageInfo.ProCateId}" @click="$router.push('/product/' + cate.id)"><a>{{ cate.name }}</a></li>
          </ul>
        </div>
        <div class="main shadow-box">
            <h1><span>产品详情</span></h1>
            <div class="main-content">
                <p class="info" v-html="htmlContent">

                </p>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Bread from '@/components/layout/Bread'
  import api from '@/api'
  import { htmlDecodeByRegExp } from '@/assets/js/utils'

  export default {
    components: {
      Bread
    },
    validate ({ params }) {
      return !isNaN(+params.id)
    },
    async asyncData({ params, error }) {
      try {
        const resData = await api.productdetail(params.id)
        if (resData.data.errorCode === 0) {
          const info = resData.data.data
          const content = htmlDecodeByRegExp(info.content)
          return {
            pageInfo: {
              ProCateId: info.ProCateId,
              content
            },
            cateId: info.ProCateId,
            productId: info.id
          }
        }
      } catch (error) {
        error({ message: '相应的产品未找到', statusCode: 404 })
      }
    },
    computed: {
      ...mapState(['categoryList']),
      htmlContent() {
        return htmlDecodeByRegExp(this.pageInfo.content)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
